<template>
	<view class="mine-container">
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="header-section-item">
				<view class="header-section-item-text">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar">
					</image>
					<!-- <view v-if="!name" @click="handleToLogin" class="login-tip">
						点击登录
					</view> -->
					<view v-if="name" @click="handleToInfo" class="user-info">
						<view class="u_title">
							{{ name }}
						</view>
					</view>
				</view>
				<view @click="handleToInfo" class="right-text">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
		</view>
		<view class="cell-seletion">
			<u-cell-group :border="false">
				<!-- <image src=""></image> -->
				<u-cell size="large" title="编辑资料" icon="account-fill" isLink
					url="/pages_mine/pages/info/edit"></u-cell>
				<u-cell size="large" title="学习记录" icon="clock-fill" isLink
					url="/pages/learn/index"></u-cell>
				<u-cell size="large" title="我的帖子" icon="file-text-fill" url="/pages/myPost/index"
					isLink></u-cell>
				<u-cell size="large" title="我的收藏" icon="qzone" url="/pages/collect/index"
					isLink></u-cell>
			<!-- 	<u-cell size="large" title="我的点赞" icon="heart-fill" url="/pages/Like/index"
					isLink></u-cell> -->
				<u-cell size="large" title="我的关注" icon="plus-people-fill" url="/pages/follow/index"
					isLink></u-cell>
			</u-cell-group>
		</view>
		<!-- 退出登录按钮 -->
		<view class="bottom-sumit">
			<view class="bottom-sumit-text" @click="handleLogout">
				退出登录
			</view>
		</view>
		<!-- <image src=></image> -->
	</view>
	<!-- 点击退出登录设置弹框 -->
	<view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
				@confirm="dialogConfirm" @close="dialogClose">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		setToken,
		getUser
	} from '@/utils/auth'
	import useUserStore from '@/store/modules/user'
	const userStore = useUserStore()
	console.log(userStore,'userStore')
	const name = userStore.name;
	console.log(name,'name123456789')
	const avatar = ref(userStore.avatar);
	//设置退出登录按钮标志位，初始值为null
	const popup = ref(null);
	// uni.$on('refresh', () => {
	// 	avatar.value = userStore.avatar;
	// })
	//点击个人信息触发
	function handleToInfo() {
		uni.navigateTo({
			url: '/pages_mine/pages/info/index'
		});
	};

	//点击立即登录
	function handleToLogin() {
		uni.navigateTo({
			url: '/pages/login'
		});
	};
	//点击头像
	function handleToAvatar() {
		uni.navigateTo({
			url: '/pages_mine/pages/avatar/index'
		});
	};
	//点击退出登录按钮
	function handleLogout() {
		//弹出层打开
		popup.value.open();
	};
	//点击退出登录按钮，点击确定弹框
	function dialogConfirm() {
		//console.log('----------------点击确认------------')
		userStore.logOut().then(() => {
			uni.navigateTo({
				url: '/pages/login'
			});
		})
	};
	//点击退出登录按钮，点击取消
	function dialogClose() {
		console.log('弹出层点击取消')
	};
	//点击我的帖子（跳转到所发布的帖子上面）
	function myPost() {
		uni.navigateTo({
			url: '/pages_mine/pages/index'
		})
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}


	.mine-container {
		width: 100%;
		height: 100%;

		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #B4CEEF;
			color: white;

			.header-section-item {
				display: flex;
				padding: 15rpx;
				justify-content: space-between;

				.header-section-item-text {
					display: flex;
					align-items: center;
				}

				.right-text {
					display: flex;
					align-items: center;
				}
			}

			.login-tip {
				font-size: 36rpx;
				margin-left: 20rpx;
			}

			.cu-avatar {
				border: 4rpx solid #eaeaea;
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.cell-seletion {
			margin-top: 20rpx;
			background-color: rgba(255, 255, 255, 1);
			// margin: 10rpx;
			border-radius: 20rpx;
		}

		.bottom-sumit {
			.bottom-sumit-text {
				text-align: center;
				border-radius: 36rpx;
				padding: 25rpx;
				background-color: #86a8c9;
				color: #fff;
				font-size: 35rpx;
				margin: 18rpx 40rpx;
			}

		}
	}
</style>